<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <title>TM Button</title>
        <link rel="stylesheet" href="./tm-button.css" type="text/css" />
        
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
            
            body {
                margin: 20px;
                font-size: 13px;
                font-family: "Meiryo";
            }
            
            [class|=sample] {
                display: -webkit-box;
                display: -moz-box;
                display: box;
            }
            
            /**
             * user
             */
            [class|=tm-button] {
                margin: 5px;
                width: 120px;
            }
            
            [class|=tm-button] .content {
                padding: 10px;
            }
            
            .sample-01 [class|=tm-button],
            .sample-01 [class|=tm-button] .content
            {
                border-radius: 1px;
            }
            
            .sample-02 [class|=tm-button],
            .sample-02 [class|=tm-button] .content
            {
                border-radius: 15px;
            }
            
            /*
            [class|=tm] {
                background: red;
            }
            /**/
        </style>
        
    </head>
    
    <body>
        
        <h1>TM Button</h1>
        
        <div class="sample-00">
            <div class="tm-button"><a class="content" href="#">Item0</a></div>
            <div class="tm-button-red"><a class="content" href="#">Item1</a></div>
            <div class="tm-button-lime"><a class="content" href="#">Item2</a></div>
            <div class="tm-button-blue"><a class="content" href="#">Item3</a></div>
            <div class="tm-button-yellow"><a class="content" href="#">Item4</a></div>
            <div class="tm-button-aqua"><a class="content" href="#">Item5</a></div>
            <div class="tm-button-fuchsia"><a class="content" href="#">Item6</a></div>
        </div>
        
        
        <div class="sample-01">
            <div class="tm-button"><a class="content" href="#">Item0</a></div>
            <div class="tm-button-red"><a class="content" href="#">Item1</a></div>
            <div class="tm-button-lime"><a class="content" href="#">Item2</a></div>
            <div class="tm-button-blue"><a class="content" href="#">Item3</a></div>
            <div class="tm-button-yellow"><a class="content" href="#">Item4</a></div>
            <div class="tm-button-aqua"><a class="content" href="#">Item5</a></div>
            <div class="tm-button-fuchsia"><a class="content" href="#">Item6</a></div>
        </div>
        
        
        <div class="sample-02">
            <div class="tm-button"><a class="content" href="#">Item0</a></div>
            <div class="tm-button-red"><a class="content" href="#">Item1</a></div>
            <div class="tm-button-lime"><a class="content" href="#">Item2</a></div>
            <div class="tm-button-blue"><a class="content" href="#">Item3</a></div>
            <div class="tm-button-yellow"><a class="content" href="#">Item4</a></div>
            <div class="tm-button-aqua"><a class="content" href="#">Item5</a></div>
            <div class="tm-button-fuchsia"><a class="content" href="#">Item6</a></div>
        </div>
        
    </body>
</html>
